<template>
  <PageContainer>
    <view class="container">
      <InvitationDetailCount
        :browse-num="countData?.browseNum"
        :browse-people-num="countData?.browsePeopleNum"
        :register-num="countData?.registerNum"
        :userName="countData?.userName"
        :memberLevelName="countData?.memberLevelName"
        :companyName="countData?.companyName"
        :avatar="countData?.avatar"
      >
        <template #list>
          <view>
            <Tabs v-model="current" :isSwiper="true" @change="change">
              <TabNav tabBarColor="#2878FF" :tab-item-flex="1" />
              <template v-for="(item, index) in tabs" :key="index">
                <TabsItem :name="item" :value="index"></TabsItem>
              </template>
            </Tabs>
            <view
              v-if="current && countData?.activityType === ActivityTypeEnum.other_join"
              class="tips"
            >
              <text class="tip-text">仅可查看本会的小程序用户浏览情况</text>
            </view>
            <Paglist
              v-model="dataList"
              :is-init-api="false"
              :parame="parame"
              @register="register"
              :scroll-top-bottom="260"
              :is-show-loadmore="dataList.length >= 1"
            >
              <RankList :columns="columns" :rows="dataList">
                <template #row="{ row, column, index }">
                  <template v-if="column.key === 'serialNumber'">
                    <view class="serial-number">{{ index + 1 }}</view>
                  </template>
                  <template v-else-if="column.key === 'userName'">
                    <view class="img-name-box">
                      <TImage
                        :src="row['avatar']"
                        errorImgType="person"
                        width="56rpx"
                        height="56rpx"
                        border-radius="50%"
                      />
                      <view class="name-last-time-box">
                        <view class="name-box">
                          <text class="name ov-1">{{ row[column.key] }}</text>
                          <view v-if="row['memberLevelName']" class="member-level-name">
                            {{ row['memberLevelName'] }}
                          </view>
                        </view>
                        <text class="last-time">{{ formatToDateTime(row['lastTime'], 'YYYY年MM月DD日 HH:mm') }}</text>
                      </view>
                    </view>
                  </template>
                  <template v-else-if="column.key === 'registerType'">
                    <text class="register-type">
                      {{ RegisterTypeText[row[column.key] as registerType] }}
                    </text>
                  </template>
                  <template v-else-if="column.key === 'isRegister'">
                    <text v-if="IsRegister.NO === row[column.key]" class="no-register">未报名</text>
                    <text v-else-if="IsRegister.OTHER === row[column.key]" class="yes-register">
                      其它会报名
                    </text>
                    <text v-else-if="IsRegister.SELF === row[column.key]" class="yes-register">
                      已报名
                    </text>
                  </template>
                  <template v-else-if="column.key === 'browseNum'">
                    <view class="browse-num" @click="toBrowseDetail(row['appUserInfoId'])">
                      <text>{{ row[column.key] || 0 }}</text>
                      <text class="ali-icon icon-you1"></text>
                    </view>
                  </template>
                </template>
              </RankList>
            </Paglist>
          </view>
        </template>
      </InvitationDetailCount>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* invitationRankingDetail 邀请排行详情 */
  import { useConList } from '@/components/Paglist/useConList';
  import RankList from '../../../components/InvitationRankingMain/RankList/index.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import InvitationDetailCount from '../../../components/InvitationDetailCount.vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import { computed, provide, reactive, ref } from 'vue';
  import { onPageScroll } from '@dcloudio/uni-app';
  import TImage from '@/components/TImage/index.vue';
  import { ActivityTypeEnum } from '@/enums/activityStatusEnum';
  import {
    RegisterTypeText,
    type registerType,
    type ActivityInviteDetailListQuery,
    type ActivityManageInviteDetailList,
    type DetailCount,
  } from '@/api/activity/types';

  import {
    activityManagerDetailCount,
    activityManagerInviteBrowseList,
    activityManagerRegistersList,
  } from '@/api/activity';
  import type { Column } from '@/pages/activity/components/InvitationRankingMain/RankList/index.vue';
  import { navigateTo, onLoad } from '@/router';
  import { IsRegister } from '@/enums/activityStatusEnum';
  import { formatToDateTime } from '@/utils/dateUtil';

  onLoad<'invitationRankingDetail'>(async (op) => {
    parame.activityId = op.activityId;
    parame.appUserInfoId = op.appUserInfoId;
    queryCount();
    refresh();
  });

  const countData = ref<DetailCount>();
  const queryCount = async () => {
    countData.value = await activityManagerDetailCount(parame.activityId, parame.appUserInfoId!);
  };
  const current = ref(0);
  const tabs = ref(['带来的报名', '带来的浏览']);
  const columns = computed<Column[]>(() => {
    if (current.value) {
      return [
        { title: '序号', key: 'serialNumber', width: '80rpx', align: 'center' },
        { title: '用户', key: 'userName', width: 'auto', align: 'left' },
        { title: '报名状态', key: 'isRegister', width: '120rpx', align: 'center' },
        { title: '浏览次数', key: 'browseNum', width: '120rpx', align: 'right' },
      ];
    }
    return [
      { title: '序号', key: 'serialNumber', width: '80rpx', align: 'center' },
      { title: '用户', key: 'userName', width: 'auto', align: 'left' },
      { title: '报名方式', key: 'registerType', width: '170rpx', align: 'right' },
    ];
  });

  const dataList = ref<ActivityManageInviteDetailList[]>([]);

  const parame = reactive<ActivityInviteDetailListQuery>({
    activityId: 0,
    current: 1,
    size: 10,
    appUserInfoId: 0,
  });

  provide('api', async (obj: ActivityInviteDetailListQuery) => {
    if (current.value) {
      return await activityManagerInviteBrowseList(obj);
    }
    return await activityManagerRegistersList(obj);
  });
  const [register, { refresh }] = useConList();

  const change = async () => {
    refresh();
  };

  const toBrowseDetail = (appUserInfoId: number) => {
    navigateTo({
      name: 'activityBrowsingHistoryDetail',
      options: {
        appUserInfoId,
        activityId: parame.activityId,
        inviteAppUserInfoId: parame.appUserInfoId,
      },
    });
  };

  onPageScroll((e) => {});
</script>

<style lang="scss" scoped>
  .container {
    .tips {
      background-color: #fff4e7;
      display: flex;
      align-items: center;
      gap: 16rpx;
      padding: 20rpx 32rpx;
      color: #e29942;
      .tip-text {
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
    .img-name-box {
      display: flex;
      align-items: center;
      position: relative;
      gap: 16rpx;
      .name-last-time-box {
        display: flex;
        flex-direction: column;
        gap: 8rpx;

        .name-box {
          display: flex;
          align-items: center;
          gap: 8rpx;
          .name {
            color: #333;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 40rpx;
          }
          .member-level-name {
            display: flex;
            padding: 4rpx 8rpx;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 2px;
            background: linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%);
            color: #ea5e0e;
            font-size: 20rpx;
            font-weight: 400;
            line-height: 20rpx;
            flex-wrap: nowrap;
          }
        }
        .last-time {
          color: #969799;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 32rpx;
        }
      }
    }

    .register-type,
    .no-register,
    .yes-register {
      font-size: 24rpx;
      font-weight: 400;
      line-height: 32rpx;
    }
    .register-type {
      color: #333;
    }
    .no-register {
      color: #969799;
    }
    .yes-register {
      color: #2878ff;
    }
    .browse-num {
      display: flex;
      align-items: center;
      gap: 8rpx;
      color: #333;
      font-size: 28rpx;
      font-weight: 400;
      line-height: 40rpx;
      justify-content: flex-end;
      .icon-you1 {
        font-size: 24rpx;
        color: #969799;
      }
    }
    .serial-number {
      color: #ccccc8;
      font-size: 24rpx;
      font-weight: 700;
      line-height: 32rpx;
    }
  }
</style>
